<mat-card [ixUiSearch]="searchableElements.elements.csr">
  <mat-toolbar-row>
    <h3>{{ 'Certificate Signing Requests' | translate }}</h3>

    <div class="actions action-icon">
      <button
        *ixRequiresRoles="requiredRoles"
        mat-button
        color="default"
        [ixTest]="['add-certificate-signing-request']"
        [ixUiSearch]="searchableElements.elements.add"
        (click)="doAdd()"
      >
        {{ 'Add' | translate }}
      </button>
    </div>
  </mat-toolbar-row>
  <mat-card-content>
    <ix-table
      [ix-table-empty]="!(dataProvider.currentPageCount$ | async)"
      [emptyConfig]="emptyService.defaultEmptyConfig(dataProvider.emptyType$ | async)"
    >
      <thead
        ix-table-head
        [columns]="columns"
        [dataProvider]="dataProvider"
      ></thead>
      <tbody
        ix-table-body
        [columns]="columns"
        [dataProvider]="dataProvider"
        [isLoading]="(dataProvider.isLoading$ | async) || false"
      >
        <ng-template
          let-certificate
          ix-table-cell
          [columnIndex]="0"
          [dataProvider]="dataProvider"
        >
          <div class="list-item">
            {{ certificate.name }}
          </div>
        </ng-template>

        <ng-template
          let-certificate
          ix-table-cell
          [columnIndex]="1"
          [dataProvider]="dataProvider"
        >
          @if (certificate.common?.length > 0) {
            <div class="list-item">
              <strong>{{ 'CN' | translate }}:</strong>
              <span>{{ certificate.common }}</span>
            </div>
          }
          @if (certificate.san?.length > 0) {
            <div class="list-item">
              <strong>{{ 'SAN' | translate }}:</strong>
              <span>{{ certificate.san }}</span>
            </div>
          }
        </ng-template>
      </tbody>
    </ix-table>
    <ix-table-pager-show-more
      [pageSize]="4"
      [dataProvider]="dataProvider"
      [ixTestOverride]="['csr']"
    ></ix-table-pager-show-more>
  </mat-card-content>
</mat-card>
